<template>
	<el-container style="background-color: #000;">
		<el-header class="header">
			<div>
				<el-button text icon="Back" @click='$router.push("/res")'>退出</el-button>
			</div>
			<div style="text-align: center; flex: 1;">
				<el-button type="primary">基本设置</el-button>
			</div>
			<div>
				<el-button type="primary">保存</el-button>
				<el-button type="primary">预览</el-button>
			</div>
		</el-header>
		<el-container>
			<el-aside class="leftside">
				<div :class="curTabMenu==item.type? 'leftsideitem_active':'leftsideitem'"
					v-for="(item,index) in tabMenus" :key="item.type" @click="handleTabClick(index,item)">
					<div class="leftsideitem_icon">
						<img :src="'./'+item.icon" height="32px" width="32px" />
					</div>
					<div class="leftsideitem_label">{{item.name}}</div>
				</div>
			</el-aside>
			<el-main style="margin: 0px; padding: 0px;">
				<el-container style="margin: 0px; padding: 0px 4px; ">
					<el-main class="panobody">
						<div id="panocontainer" name="panocontainer" style="width:100%;height:100%"></div>
						<div v-if="curTabMenu=='view'" style="position: absolute; width: 100%;">
							<div style="position: absolute;bottom:100px;text-align: center;width: 100%;">
								<el-button type="primary">把当前视角设置为初始角度</el-button>
							</div>
						</div>
					</el-main>
					<!--场景分组-->
					<el-footer class="footer">
						<div>
							<div id="sceneGroupTabs" class="sceneGroupTabs" style="display: flex;">
								<div class="sceneGroupTab" v-for="(item,index) in sceneGroups"
									:class="curSceneTabId==item.id? 'active':''" :key="index"
									@click="curSceneTabId=item.id">
									<div style="margin: 0px 5px;">{{item.title}}</div>

									<el-dropdown placement="top" trigger="click">
										<div style="padding: 6px 6px; margin-left: 5px;"><el-icon>
												<MoreFilled />
											</el-icon></div>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>重新命名</el-dropdown-item>
												<el-dropdown-item>删除分组</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
							</div>
							<div style="background-color: #000; height: 110px;">
								<div style="display: flex;">
									<div class="sceneThumbItem">
										<div style="">
											<img style="width: 90px;"
												src="https://720.xtspace.cn/file/view/img/1876892675806875649/thumb/1/1.jpg" />
										</div>
										<div style="position: absolute; top:0px;right: 0px;">
											<el-dropdown placement="top-start" trigger="click">
												<div style="padding: 6px 6px; margin-left: 5px;"><el-icon>
														<MoreFilled />
													</el-icon></div>
												<template #dropdown>
													<el-dropdown-menu>
														<el-dropdown-item>重新命名</el-dropdown-item>
														<el-dropdown-item>删除分组</el-dropdown-item>
													</el-dropdown-menu>
												</template>
											</el-dropdown>
										</div>
										<div style="position: absolute; bottom:0px;background-color: rgba(0,0,0,0.6);color:#c7c7c7; width: 100%; text-align: center;">入口表演</div>
										<div>
											
										</div>
									</div>
									
									<div class="sceneThumbItem active">
										<div style="">
											<img style="width: 90px;"
												src="https://720.xtspace.cn/file/view/img/1876892675806875649/thumb/1/1.jpg" />
										</div>
										<div style="position: absolute; bottom:0px;background-color: rgba(0,0,0,0.6);color:#c7c7c7; width: 100%; text-align: center;">入口表演2</div>
										<div style="position: absolute; top:0px;right: 0px;">
											<el-dropdown placement="top-start" trigger="click">
												<div style="padding: 6px 6px; margin-left: 5px;"><el-icon>
														<MoreFilled />
													</el-icon></div>
												<template #dropdown>
													<el-dropdown-menu>
														<el-dropdown-item>重新命名</el-dropdown-item>
														<el-dropdown-item>删除分组</el-dropdown-item>
													</el-dropdown-menu>
												</template>
											</el-dropdown>
										</div>
									
									</div>
								</div>
							</div>
						</div>
					</el-footer>
				</el-container>
			</el-main>
			<el-aside class="rightside">
				<router-view :panoData="panoData" @changeview="handleChangeView"></router-view>
			</el-aside>
		</el-container>
	</el-container>
</template>

<script>
	import {
		useRoute
	} from 'vue-router';
	import request from '../../../utils/request';
	import Sortable from 'sortablejs';
	import {
		nextTick
	} from 'vue';
	export default {

		data() {
			return {
				panoid: -1,
				panoData: {},
				curTabMenu: 'basic',
				curSceneTabId: 1,
				sceneGroups: [{
					id: 1,
					title: "默认分组"
				}, {
					id: 2,
					title: "测试"
				}],
				tabMenus: [{
						type: "basic",
						icon: "../../src/assets/hotspot.png",
						link: "/editor/basic",
						name: "全局"
					},
					{
						type: "view",
						icon: "../../src/assets/view.png",
						link: "/editor/view",
						name: "视角"
					},
					{
						type: "hotspot",
						icon: "../../src/assets/hotspot.png",
						link: "/editor/hotspot",
						name: "热点"
					},
					{
						type: "cruise",
						icon: "../../src/assets/cruise.png",
						link: "/editor/cruise/",
						name: "巡游"
					},
					{
						type: "mask",
						icon: "../../src/assets/mask.png",
						link: "/editor/mask",
						name: "遮罩"
					},
					{
						type: "sandbox",
						icon: "../../src/assets/sand-icon.png",
						link: "/editor/sandBox",
						name: "沙盘"
					},
					{
						type: "music",
						icon: "../../src/assets/music.png",
						link: "/editor/music",
						name: "音乐"
					},
				]
			}
		},
		mounted() {
			//暗黑模式
			var html=window.document.documentElement;
			html.className="dark";
			//获取panoid
			const route = useRoute();
			this.panoid = route.params.panoid;

			window.krpano = null;
			embedpano({
				swf: "tour.swf",
				xml: "../../../uploads/cases/tour.xml",
				target: "panocontainer",
				html5: "auto",
				mobilescale: 1.0,
				passQueryParameters: true,
				onready: function(krpano_interface) {
					window.krpano = krpano_interface;
				}
			});

			nextTick(() => {
				new Sortable(document.getElementById("sceneGroupTabs"), {
					draggable: '.sceneGroupTab'
				});
			})

			this.loadPanoData();
			
			
			
			

		},
		methods: {
			onTabDragEnd(tab) {
				console.log(tab);
			},
			loadPanoData() {
				request.post("/api/pano/detail", {
					panoid: this.panoid
				}).then(res => {
					if (res.status == 200 && res.data.code) {
						this.panoData = res.data.detail;
					}

				}).catch(err => {});
			},
			handleTabClick(index, item) {
				console.log(window.krpano);
				this.curTabMenu = item.type;
				switch (this.curTabMenu) {
					case "view":
						window.krpano.call('set(layer[layer_view_setting].visible,true);')
						break;
				}
				this.$router.push("/editor/" + item.type + "/" + this.panoid)
			},
			handleChangeView(type, value) {
				console.log(type, value);
				window.krpano.call('set(view.' + type + ',' + value + ')');
			}
		},
		watch: {
			curTabMenu: function(val) {
				window.krpano.call('set(layer[layer_view_setting].visible,' + (val == 'view' ? true : false) + ');')
				if (val == "view")
					console.log(val);
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #333;
		line-height: 50px;
		height: 50px;
		display: flex;
		padding: 0px 2px;
	}

	.leftside {
		width: 60px;
		background-color: #333;
		height: calc(100vh - 50px);
	}

	.leftsideitem {
		text-align: center;
		margin: 10px 10px;
		border-radius: 5px;
		padding: 2px 0px;
		cursor: pointer;
	}

	.leftsideitem:hover {
		background-color: #4f4f4f;
		text-align: center;
		margin: 10px 10px;
		border-radius: 5px;
		padding: 2px 0px;
		cursor: pointer;
	}

	.leftsideitem_active {
		text-align: center;
		background-color: #1c8ed5;
		text-align: center;
		margin: 10px 10px;
		border-radius: 5px;
		padding: 2px 0px;
		cursor: pointer;
	}

	.leftsideitem_icon {
		width: 100%;
		height: 32px;
		text-align: center;
	}

	.leftsideitem_label {
		color: #ebebeb;
		font-size: 12px;
		text-align: center;
	}

	.panobody {
		width: 100%;
		height: calc(100vh - 210px);
		background-color: #ebebeb;
		padding: 0px;
		position: relative;
		border-radius: 5px;
	}

	.rightside {
		width: 280px;
		background-color: #1A1A1A;
		margin: 5px;
		padding: 0px;
	}

	.footer {
		margin-top: 5px;
		box-sizing: border-box;
		color: #999;
		background-color: #1A1A1A;
		border-radius: 2px;
		height: 150px;
		padding: 5px;
	}

	.propertywraper {
		margin: 5px;
		background-color: #333;
		height: calc(100vh - 60px);
	}



	:deep(.el-collapse) {
		background-color: #282828 !important;
		border: none;
		margin-bottom: 10px;
		margin: 0px;
		padding: 0px;

	}

	:deep(.el-collapse-item__wrap) {
		background-color: #282828;
		padding: 0px;
		border: none;
	}

	:deep(.el-collapse-item__header) {
		color: #fff;
		background-color: #282828 !important;
		border: none;
		border-radius: 4px;
		padding: 0px 10px;
		height: 45px;

	}

	:deep(.el-collapse-item__content) {
		color: #999;
		background-color: #282828 !important;
		border: none;
		margin: 0px;
		padding: 0px 5px;

	}

	.sceneGroupTab {
		height: 28px;
		line-height: 28px;
		padding: 3px 10px;
		margin-right: 5px;
		border-radius: 5px 5px 0px 0px;
		cursor: pointer;
		display: flex;
	}

	.sceneGroupTab:hover {
		background-color: #0b0b0b;
	}

	.sceneGroupTab.active {
		background-color: #000;
	}


	.sceneThumbItem {
		position: relative;
		margin: 10px 3px;
		width: 85px;
		height: 85px;
		border: 2px solid #000000;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
	}
	.sceneThumbItem.active {
		position: relative;
		margin: 10px 3px;
		width: 85px;
		height: 85px;
		border: 2px solid #ffffff;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
	}
</style>